<!-- 滑动切换选项卡演示(标准写法) -->
<!--  此demo使用了uView的tabsSwiper全屏选项卡 https://uviewui.com/components/tabsSwiper.html -->
<template>
	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
	<z-paging-swiper>
		
		<!-- 此处代码复制了uView中tabsSwiper全屏选项卡的代码 -->
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<view slot="top">
			<view class="status_bar backbule">
			  <!-- 这里是状态栏 -->
		    </view>
			<view class="top backbule ">
				<view class="top-tool">
					<u-search placeholder="日照香炉生紫烟" v-model="keyword" :animation="true"></u-search>
				</view>
				<view class="top-tool1">
					<u-icon name="grid" color="white" size="46"></u-icon>
					<u-icon name="arrow-downward" color="white" size="46" style="margin-left: 20rpx;"></u-icon>
				</view>
			</view>
			<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750" active-color="white" inactive-color="#e5e8ea" font-size="32" ></u-tabs-swiper>
		</view>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="false">
					<view class="wrap">
						<u-swiper :list="list" height="340" :title="true" indicator-pos="bottomRight"></u-swiper>
					</view>
					<view class="content">
						<u-section style="margin-top: 40rpx; margin-bottom: 20rpx;" title="猜你喜欢 分享给小伙伴一起看吧"  :right="false" :show-line="false"></u-section>
						<u-grid-double :videolist = "videolist"></u-grid-double>
						<u-section  style="margin-top: 40rpx; margin-bottom: 20rpx;" title="电视剧"  :right="false" :show-line="false"></u-section>
						<u-grid-first-three :videolist="videolist" :item_first="item_first"></u-grid-first-three>
						<u-section  style="margin-top: 40rpx; margin-bottom: 20rpx;" title="电影"  :right="false" :show-line="false"></u-section>
						<u-grid-first-three :videolist="videolist" :item_first="item_first"></u-grid-first-three>
					</view>
				</z-paging>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
	
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				firstLoaded: false,
				keyword:'',
				tabList: [{
					name: '推荐'
				}, {
					name: '电视剧'
				}, {
					name: '电影'
				}, {
					name: '综艺'
				},{
					name: '动漫'
				}],
				item_first:{	
					videotype:1,
					vod_remarks:"更新至20210912期",
					vod_blurb:'身无彩凤双飞翼',
					vod_pic: "http://yingshi-stream.2345cdn.net/dypcimg/index/upload/0c0e09eb1d86dd20b62069804004e7a9_1920x550.jpg",
					vod_name: '身无彩凤双飞翼，心有灵犀一点通'
				},
				list: [
					{
						image: 'http://yingshi-stream.2345cdn.net/dypcimg/index/upload/0c0e09eb1d86dd20b62069804004e7a9_1920x550.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'http://yingshi-stream.2345cdn.net/dypcimg/index/upload/99dd722be09aa2f375deb81a4af759e4_1920x550.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'http://yingshi-stream.2345cdn.net/dypcimg/index/upload/5d1576d655e63f06c0313db526b077c4_1920x550.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				videolist: [
					{	
						videotype:1,
						vod_remarks:"更新至20210912期",
						vod_blurb:'昨夜星辰昨夜风',
						vod_pic: "https://img.52swat.cn/upload/vod/20210104-1/6eed135ba2e721fe6134feb96e989ae6.jpg",
						vod_name: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{	
						videotype:1,
						vod_remarks:"更新至20210912期",
						vod_blurb:'身无彩凤双飞翼',
						vod_pic: "https://img.52swat.cn/upload/vod/20200813-1/3e76a02831c77a83e16f66fe1fa4e1bd.jpg",
						vod_name: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{	
						videotype:1,
						vod_remarks:"更新至20210912期",
						vod_blurb:'谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
						vod_pic: "https://img.52swat.cn/upload/vod/20210819-1/bc8972aacbac42c3eadaec3df1c5de0e.jpg",
						vod_name: '谁念西风'
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			};
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			queryList(pageNo, pageSize) {
				// this.$refs.paging.complete(false);
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageNo: pageNo,
					pageSize: pageSize,
					type: this.tabIndex + 1
				}
				console.log('首页');
				console.log('首页');
				console.log(this.$refs.paging);
				// this.$request.queryList(params).then(res => {
				// 	//将请求的结果数组传递给z-paging
				// 	this.$refs.paging.complete(res.data.list);
				// 	this.firstLoaded = true;
				// }).catch(res => {
				// 	//如果请求失败写this.$refs.paging.complete(false);
				// 	//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			},
			itemClick(item) {
				console.log('点击了', item.title);
			}
		}
	}
</script>

<style>
	/* #ifdef H5 */
	.u-tabs {
		background: #46afec !important;
		position: absolute;
		
		top: 60px;
	}
   /* #endif */
	.status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
		  text-overflow: ellipsis; 
	  }
	.swiper {
		height: 100%;
	}
	.top{
		height: 200rpx;
		display: flex;
	}
	.top-tool{
		line-height: 120rpx;
		width: 530rpx;
		margin: 0 40rpx;
	}
	.top-tool1{
		line-height: 130rpx;
	}
	.u-scroll-view{
		position: absolute !important;
		top: 176rpx;
	}
	.content{
		width: 96%;
		margin: auto;
	}
</style>

